<template>
    
    <div class="ma-content-block" >
        <div style="position: relative;" @click="handleCel">
            <a-input-search style="margin-bottom:2%" v-model="address" placeholder="输入位置并点击搜索或直接在地图上选择位置" search-button @search="handleSearch">
                <template #button-icon>
                    <icon-search/>
                </template>
                <template #button-default>
                    搜索
                </template>
            </a-input-search>
            <div class="abBox" v-if="showList != 0">
                <div class="flex align_center pointer" v-for="(item,index) in pois" :key="index" style="margin-bottom: 5px;" @click.stop="handleClick(item)">
                    <div class="flex align_center " style="margin-right: 10px;">
                        <icon-location :size="20" style="color: rgba(0, 0, 0, .15);" />
                    </div>
                    <div class="flex_1 width0 ellipsis">{{ item.name }}</div>
                </div>
            </div>
        </div>
        
        <div id="container"></div>
    </div>
</template>

<script setup>

import { onMounted,onUnmounted,ref,defineEmits,defineProps } from "vue"
import AMapLoader from "@amap/amap-jsapi-loader"
import { request } from "@/utils/request.js";
const map = ref(null);
const AMaps = ref(null)
const address = ref('')
const showList = ref(false)
const pois = ref([])
const position = ref({ lng: '', lat: '' });
const emit = defineEmits(["chuanzhi"]);
const props = defineProps({
    fromData: {
			default: {},
		},
});
onMounted(()=>{
    window._AMapSecurityConfig = {
        securityJsCode: "8b94ca17fbe5e6e7544fcdb428c033af",
    }
    AMapLoader.load({
        key:"5b6c28aa2c97e246f77032a58f583a8a",
        version:"2.0",
        plugins:['AMap.Geocoder','AMap.PlaceSearch','AMap.AutoComplete','AMap.MouseTool'],
    }).then((AMap) => {
    AMaps.value = AMap;
    if(props.fromData.deliveryAddress == ''){
        map.value = new AMap.Map('container', {
            zoom: 13, // 地图显示的缩放级别
            center: [105.592898, 30.532847], // 地图中心点坐标
        });
    }else{
        console.log(props.fromData)
        address.value = props.fromData.deliveryAddress
        map.value = new AMap.Map('container', {
            zoom: 13, // 地图显示的缩放级别
            center: [props.fromData.lng, props.fromData.lat], // 地图中心点坐标
        });
        new AMaps.value.Marker({
            map: map.value, 
            position: [props.fromData.lng, props.fromData.lat],
        });
    }
    
    map.value.on('click', (e) => {
        console.log('点击位置的信息：', e);
        map.value.clearMap();
        map.value.setCenter([e.lnglat.lng, e.lnglat.lat])
        new AMaps.value.Marker({
            map: map.value, 
            position: [e.lnglat.lng, e.lnglat.lat],
        });
        // 可以在这里添加你的逻辑，例如显示标记、获取地址等
        // e.lnglat 获取点击的经纬度
        var position = e.lnglat;
        // 将经纬度转为地理位置
        
        map.value.plugin('AMap.Geocoder', function() {
            var geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: 'all'
            });
            geocoder.getAddress(position, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    // result.regeocode 获取到的地理位置信息
                    emit('chuanzhi',{
                        pname:result.regeocode.addressComponent.province,
                        cityname:result.regeocode.addressComponent.city,
                        adname:result.regeocode.addressComponent.district,
                        deliveryAddress:result.regeocode.formattedAddress,
                        location:{
                            lat: e.lnglat.lat,
                            lng:e.lnglat.lng
                        }
                    })
                    address.value = result.regeocode.formattedAddress
                    // 可以在这里添加你的代码，例如显示地址到页面

                }
            });
        });
    });
  }).catch((e) => {
    console.log(e);
  });
})
const handleCel = ()=>{
    showList.value = false
    pois.value = []
}
const handleClick = (row)=>{
    console.log(row)
    address.value = row.name
    showList.value = false
    pois.value = []
    map.value.clearMap();
    map.value.setCenter([row.location.lng, row.location.lat])
    new AMaps.value.Marker({
        map: map.value,
        position: [row.location.lng, row.location.lat],
    });
    row.deliveryAddress = row.address
    emit('chuanzhi',row)
}
const handleSearch = async()=>{
    console.log(address.value)
    if(!address.value) return;
    let placeSearch = new AMaps.value.PlaceSearch({
        city: '', // 兴趣点城市，支持城市名、citycode、adcode
        citylimit: false, // 是否强制在设置的城市内搜索，默认false
        // type: '', // 兴趣点类别，用‘|’分隔，默认：'餐饮服务|商务住宅|生活服务'
        pageSize: 20, // 每页条数，默认10，范围1-50
        pageIndex: 1, // 页码
        extensions: 'all', // 默认base，返回基本地址信息；all：返回详细信息
        
        autoFitView: true, // 是否自动调整地图视野到marker点都处于可见范围
    })
    placeSearch.search(address.value, function(status, result) {
        console.log(result)
        showList.value = true
        pois.value = result.poiList.pois
    })
}

</script>
<style scoped >
    #container{
        width: 100%;
        height: 300px

    }
    .abBox{
        padding: 10px;
        position: absolute;
        bottom: -115px;
        left: 0;
        z-index: 99;
        width: 100%;
        height: 122px;
        overflow: auto;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 8px 4px rgba(0, 0, 0, .15);
    }
    .abBox::-webkit-scrollbar {
        width: 0; /* Chrome, Safari 和 Opera */
    }
    
    .abBox::-webkit-scrollbar-track {
        background: transparent; /* Chrome, Safari 和 Opera */
    }
    
    .abBox::-webkit-scrollbar-thumb {
        background: transparent; /* Chrome, Safari 和 Opera */
    }
    
    .abBox::-webkit-scrollbar-button {
        display: none; /* Chrome, Safari 和 Opera */
    }
    .pointer {
        cursor: pointer;
    }
</style>
<script>

export default { name: "prediction:maps" };
</script>